@extends('layouts.base')

@section('title', '主板类型')

@section('admin-style')
	<link rel="stylesheet" href="{{ asset('/assets/plugins/dropify/dist/css/dropify.min.css') }}">
	<link href="{{ asset('/assets/plugins/clockpicker/dist/jquery-clockpicker.min.css') }}" rel="stylesheet">
@stop

@section('content')
<div class="container-fluid">
	<!-- ============================================================== -->
	<!-- Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->
	<div class="row page-titles">
	    <div class="col-md-5 align-self-center">
	        <h3 class="text-themecolor">主板配置</h3>
	    </div>
	    <div class="col-md-7 align-self-center">
	        <ol class="breadcrumb">
	            <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
	            <li class="breadcrumb-item">主板类型管理</li>
	            <li class="breadcrumb-item">主板类型列表</li>
	            <li class="breadcrumb-item active">主板配置</li>
	        </ol>
	    </div>
	</div>
	<div class="row">
	    <div class="col-lg-12">
	        <div class="card">
            	<div class="card-header bg-success">
                    <h4 class="m-b-0 text-white">添加配置</h4>
                </div>
                <div class="card-body"></div>
                <div class="card-body">
                	<div class="form-body">
                		<div class="boder-rect bgbr-1">
                    	<span class="rec-title">基础信息</span>
	                        <div class="form-group row">
	                            <label class="control-label text-right col-md-2" for="">名称：</label>
	                            <div class="col-md-7">
	                            	<span>{{ $mainborad->name }}</span>	                                
	                            </div>
	                        </div>  
	                        <div class="form-group row">
	                            <label class="control-label text-right col-md-2" for="">货道行数：</label>
	                            <div class="col-md-7">
	                                <span>{{ $mainborad->row }}</span>
	                            </div>
	                        </div> 
                            <div class="form-group row">
                                <label class="control-label text-right col-md-2" for="">货道列数：</label>
                                <div class="col-md-7">
                                    <span>{{ $mainborad->col }}</span>
                                </div>
                            </div> 
                            <div class="form-group row">
                                <label class="control-label text-right col-md-2" for="">版本号：</label>
                                <div class="col-md-7">
                                    <span>{{ $mainborad->version }}</span>
                                </div>
                            </div> 
                            <div class="form-group row">
                                <label class="control-label text-right col-md-2" for="">介绍：</label>
                                <div class="col-md-7">
                                    <span>{{ $mainborad->description }}</span>
                                </div>
                            </div> 
	                    </div> 
                    </div>
                    <el-form class="needs-validation" ref="configForm" :rules="ruleForm" :model="configForm" method="post" action="{{ route('admin.mainborads.configStore', $mainborad->id) }}" novalidate enctype="multipart/form-data">  
                        @csrf
                    	<div class="boder-rect bgbr-1">
                    	<span class="rec-title">配置信息</span>
                    		<div class="form-group boder-rect bgbr-1" v-for="(item, index) in settings">
                    			<span class="rec-title">配置项--@{{ item.title }}</span>
                    			<div class="form-group row">
                    				<input type="hidden" v-model="item.id" :name="'config['+index+'][id]'">
		                            <label class="control-label text-right col-md-2" for="">标题：</label>
		                            <div class="col-md-2">
		                                <input type="text" :rule="ruleForm.title" v-model="item.title" class="form-control{{ $errors->has('title') ? ' is-invalid' : '' }}" id="" :name="'config['+index+'][title]'" placeholder="名称" value="{{ old('title') }}" required>
	                                    @if ($errors->has('title'))
	                                        <span class="invalid-feedback" role="alert">
	                                            <strong>{{ $errors->first('title') }}</strong>
	                                        </span>
	                                    @endif
		                                <div class="invalid-feedback">
	                                       请填写标题
	                                    </div>
		                            </div>
		                            <label class="text-right" for="">标识：</label>
		                            <div class="col-md-2">
		                                <input type="text" :rule="ruleForm.name" v-model="item.key" class="form-control{{ $errors->has('key') ? ' is-invalid' : '' }}" id="" :name="'config['+index+'][key]'" placeholder="标识" value="{{ old('key') }}" required>
	                                    @if ($errors->has('key'))
	                                        <span class="invalid-feedback" role="alert">
	                                            <strong>{{ $errors->first('key') }}</strong>
	                                        </span>
	                                    @endif
		                                <div class="invalid-feedback">
	                                       请填写标识
	                                    </div>
		                            </div>
		                            <label class="text-right" for="">数据类型：</label>
		                            <div class="col-md-2">
		                            	<select v-model="item.type" :name="'config['+index+'][type]'" class="form-control custom-select">
	                                        <option v-for="(itme1 , index1) in type" :value="itme1.value">@{{ itme1.title }}</option>
	                                    </select>
		                            </div>
	                            </div>
	                            <div class="form-group row">
		                            <label class="control-label text-right col-md-2" for="">配置数据：</label>
		                            <div class="col-md-2" v-if="item.type == 1">
		                                <input type="text" :rule="ruleForm.value" v-model="item.value" class="form-control{{ $errors->has('value') ? ' is-invalid' : '' }}" id="" :name="'config['+index+'][value]'" value="{{ old('value') }}">
		                            </div>
		                            <div class="col-md-2" v-if="item.type == 2"> 
		                                <input type="number" step="0.01" :rule="ruleForm.value" v-model="item.value" class="form-control{{ $errors->has('value') ? ' is-invalid' : '' }}" id="" :name="'config['+index+'][value]'" value="{{ old('value') }}">
		                            </div>
		                            <div class="col-md-2" v-if="item.type == 3">
		                            	<input type="text" :rule="ruleForm.value" v-model="item.value" class="form-control{{ $errors->has('value') ? ' is-invalid' : '' }}" id="" :name="'config['+index+'][value]'" value="{{ old('value') }}">
		                            </div>
		                            <div class="col-md-2" v-if="item.type == 4">
		                                <input type="text" :rule="ruleForm.value" v-model="item.value" class="form-control{{ $errors->has('value') ? ' is-invalid' : '' }}" id="" :name="'config['+index+'][value]'" value="{{ old('value') }}">
		                            </div>
		                            <div class="col-md-1">
		                            	<button type="button" class="btn btn-danger" @click="del_config(index, item.id)">删除</button>
		                            </div>
	                            </div>
	                        </div>  
                        </div>
                    	</div>
                    	<div class="form-actions">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="offset-sm-3 col-md-9">
                                            <button type="submit" class="btn btn-success"> <i class="fa fa-check"></i> 提交</button>
                                            <a href="javascript:;" @click="add_config"><button type="button" class="btn btn-info"> <i class="fa fa-check"></i> 新增配置</button></a>
                                            <a href="{{ route('admin.mainborads.index') }}"><button type="button" class="btn btn-danger"><i class=" fas fa-times"></i> 取消</button></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
	    </div>
	</div>
</div>
@stop

@section('admin-js')

<!--Custom JavaScript -->
<script src="{{ asset('assets/js/validation.js') }}"></script>
<!-- jQuery file upload -->
<script src="{{ asset('assets/plugins/dropify/dist/js/dropify.min.js') }}"></script>

<script>
//For validation with custom styles
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);      
    })();
    //vue
    //
    var my_vue = new Vue({
            el: '#app',
            data: function(){
               return {
                  configForm: {

                  },
                  ruleForm: {
                        name: [
                            { required: true, message: '请输入权益卡名称', trigger: 'blur' },
                        ]
                   },
                   settings:[],
                   type : [{
                   		title:'字符',
                   		value: 1
                   	},
                   	{
                   		title:'数值',
                   		value: 2
                   	},{
                   		title:'时间点',
                   		value: 3
                   	},{
                   		title:'时间段',
                   		value: 4
                   	},
                   ],
               } 
            },
            mounted:function(){
            	this.init();
            },
            created:function(){

            },
            methods: {
                init:function(){
                	@if($mainborad->config)
                		@foreach ($mainborad->config as $config)
	                		var itme = {
	                			id: '{{ $config->id }}',
	                			title: '{{ $config->title }}',
	                			key: '{{ $config->key }}',
	                			type: '{{ $config->type }}',
	                			value: '{{ $config->value }}'
	                		}
	                		this.settings.push(itme);
	                	@endforeach
                	@endif                	
                },
                getData:function(){
                    
                },
                add_config: function(){                    
                    this.settings.push({
                    	title: '',
                			key: '',
                			type: 1,
                			value: ''
                    });
                },
                del_config: function($k, id){
                	swal({
        					  title: '您确定要删除吗?',
        					  icon: "warning",
        					  buttons: ['取消', '确定'],
        					  dangerMode: true,
        					})
        					.then((willDelete) => {
        					  if (willDelete) {			    
        					    if(id != undefined){
                        axios.delete('{{ route('admin.mainborads.configDestroy') }}',{
                          params: {
                            id: id
                          }
                        },
                          ).then(res => {
                            
                          })
                          .catch((e) => {
                            location.href = '{{ route('admin.mainborads.config', $mainborad->id) }}'
                          });
                      }
                      this.settings.splice($k, 1);
        					  } else {
        					    
        					  }
        					});
                },
            }
        }); 
</script>
@stop